<script setup>
defineProps({
  title: {
    type: String,
    required: true
  },
  value: {
    type: [String, Number],
    required: true
  },
  icon: {
    type: String,
    default: ''
  },
  color: {
    type: String,
    default: 'primary'
  },
  percent: {
    type: Number,
    default: null
  },
  trend: {
    type: String,
    default: 'up' // 'up' or 'down'
  }
})

const getColorClass = (color) => {
  const colorMap = {
    primary: 'bg-primary text-white',
    success: 'bg-success text-white',
    warning: 'bg-warning text-white',
    danger: 'bg-danger text-white'
  }
  return colorMap[color] || colorMap.primary
}
</script>

<template>
  <div class="stat-card h-full w-full">
    <div class="flex flex-col h-full w-full">
      <div class="flex justify-between items-start w-full">
        <div class="text-text-light text-sm">{{ title }}</div>
        <div :class="`w-8 h-8 rounded-md flex items-center justify-center ${getColorClass(color)}`">
          <el-icon><component :is="icon" /></el-icon>
        </div>
      </div>
      
      <div class="font-bold text-3xl my-3">{{ value }}</div>
      
      <div v-if="percent !== null" class="flex items-center mt-auto">
        <el-icon class="mr-1" :class="trend === 'up' ? 'text-success' : 'text-danger'">
          <component :is="trend === 'up' ? 'ArrowUp' : 'ArrowDown'" />
        </el-icon>
        <span :class="trend === 'up' ? 'text-success' : 'text-danger'">{{ percent }}%</span>
        <span class="text-text-light text-xs ml-1">与上月相比</span>
      </div>
    </div>
  </div>
</template>